<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>二维码生成器</title>
        <!-- <script src="https://cdn.tailwindcss.com"></script> -->
        <script src="css/3.4.16.css"></script>
        <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"> -->
        <link href="css/all.min.css" rel="stylesheet">
        <script src="js/qrcode.min.js"></script>
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            primary: '#3B82F6',
                            secondary: '#64748B',
                            accent: '#F97316',
                            neutral: '#1E293B',
                        },
                        fontFamily: {
                            inter: ['Inter', 'system-ui', 'sans-serif'],
                        },
                    }
                }
            }
        </script>
        <style type="text/tailwindcss">
            @layer utilities {
                .content-auto {
                    content-visibility: auto;
                }
                .shadow-custom {
                    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
                }
                .transition-custom {
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }
            }
        </style>
    </head>
    <body class="bg-gray-50 font-inter min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="navbar">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fa-solid fa-qrcode text-primary text-2xl"></i>
                    <h1 class="text-xl md:text-2xl font-bold text-neutral">二维码生成器</h1>
                </div>
                <nav>
                    <ul class="hidden md:flex space-x-6">
                        <li><a href="#" class="text-neutral hover:text-primary transition-custom font-medium">首页</a></li>
                        <li><a href="#" class="text-neutral hover:text-primary transition-custom font-medium">关于</a></li>
                        <li><a href="#" class="text-neutral hover:text-primary transition-custom font-medium">联系我们</a></li>
                    </ul>
                    <button class="md:hidden text-neutral text-xl" id="menuBtn">
                        <i class="fa-solid fa-bars"></i>
                    </button>
                </nav>
            </div>
            <!-- 移动端菜单 -->
            <div class="md:hidden hidden bg-white w-full border-t" id="mobileMenu">
                <ul class="py-2 px-4 space-y-3">
                    <li><a href="#" class="block text-neutral hover:text-primary transition-custom py-2">首页</a></li>
                    <li><a href="#" class="block text-neutral hover:text-primary transition-custom py-2">关于</a></li>
                    <li><a href="#" class="block text-neutral hover:text-primary transition-custom py-2">联系我们</a></li>
                </ul>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="flex-grow container mx-auto px-4 py-8 md:py-12">
            <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-custom p-6 md:p-8 mb-8 transform hover:scale-[1.01] transition-custom">
                <h2 class="text-2xl md:text-3xl font-bold text-neutral mb-6 text-center">生成你的二维码</h2>
                
                <form id="qrcodeForm" class="space-y-6">
                    <div class="relative">
                        <label for="url" class="block text-sm font-medium text-gray-700 mb-1">URL地址</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa-solid fa-link"></i>
                            </span>
                            <input type="url" id="url" name="url" 
                                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                                placeholder="https://example.com" required>
                            <button type="button" id="clearBtn" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 transition-custom">
                                <i class="fa-solid fa-times-circle"></i>
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">请输入有效的URL地址，例如：https://www.example.com</p>
                    </div>
                    
                    <div class="flex justify-center">
                        <button type="button" id="generateBtn" 
                            class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg shadow-md hover:shadow-lg transition-custom flex items-center space-x-2">
                            <i class="fa-solid fa-qrcode"></i>
                            <span>生成二维码</span>
                        </button>
                    </div>
                </form>
            </section>
            
            <section id="qrcodeResult" class="max-w-3xl mx-auto bg-white rounded-xl shadow-custom p-6 md:p-8 mb-8 hidden">
                <h3 class="text-xl font-bold text-neutral mb-6 text-center">生成结果</h3>
                
                <div class="flex flex-col items-center">
                    <div id="qrcodeContainer" class="p-6 bg-white border-2 border-gray-100 rounded-lg shadow-inner mb-6 flex justify-center items-center min-h-[250px]">
                        <!-- <div id="qrcode" class="w-full max-w-xs"></div> -->
                        <canvas id="qrcode" class="w-full max-w-xs"></canvas>
                    </div>
                    
                    <div class="flex flex-wrap justify-center gap-3 w-full">
                        <button id="downloadPNG" class="bg-accent hover:bg-accent/90 text-white font-medium py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-custom flex items-center space-x-2">
                            <i class="fa-solid fa-download"></i>
                            <span>下载PNG</span>
                        </button>
                        <button id="downloadSVG" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-custom flex items-center space-x-2">
                            <i class="fa-solid fa-download"></i>
                            <span>下载SVG</span>
                        </button>
                        <button id="copyToClipboard" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-custom flex items-center space-x-2">
                            <i class="fa-solid fa-copy"></i>
                            <span>复制到剪贴板</span>
                        </button>
                    </div>
                </div>
            </section>
            
            <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-custom p-6 md:p-8">
                <h3 class="text-xl font-bold text-neutral mb-4">使用说明</h3>
                <ul class="space-y-3 text-gray-700">
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-primary mt-1 mr-2"></i>
                        <span>在上方的输入框中输入有效的URL地址</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-primary mt-1 mr-2"></i>
                        <span>点击"生成二维码"按钮</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-primary mt-1 mr-2"></i>
                        <span>生成的二维码将显示在下方区域</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-primary mt-1 mr-2"></i>
                        <span>您可以选择下载二维码图片或复制到剪贴板</span>
                    </li>
                </ul>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="bg-neutral text-white py-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-bold mb-4 flex items-center">
                            <i class="fa-solid fa-qrcode mr-2"></i>
                            二维码生成器
                        </h4>
                        <p class="text-gray-300">快速、简单地生成高质量二维码，满足您的各种需求。</p>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">功能链接</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-300 hover:text-white transition-custom">URL二维码</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-custom">文本二维码</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-custom">联系信息二维码</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-custom">更多...</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa-solid fa-envelope mr-2"></i>
                                <a href="mailto:contact@example.com" class="text-gray-300 hover:text-white transition-custom">contact@example.com</a>
                            </li>
                            <li class="flex items-center">
                                <i class="fa-solid fa-phone mr-2"></i>
                                <a href="tel:+8612345678901" class="text-gray-300 hover:text-white transition-custom">+86 123 4567 8901</a>
                            </li>
                        </ul>
                        <div class="mt-4 flex space-x-4">
                            <a href="#" class="text-gray-300 hover:text-white transition-custom text-xl">
                                <i class="fa-brands fa-weixin"></i>
                            </a>
                            <a href="#" class="text-gray-300 hover:text-white transition-custom text-xl">
                                <i class="fa-brands fa-weibo"></i>
                            </a>
                            <a href="#" class="text-gray-300 hover:text-white transition-custom text-xl">
                                <i class="fa-brands fa-github"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
                    <p>&copy; 2025 二维码生成器 - 保留所有权利</p>
                </div>
            </div>
        </footer>

        <!-- 通知提示 -->
        <div id="notification" class="fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 transform translate-y-20 opacity-0 transition-all duration-300 flex items-center space-x-3 max-w-sm">
            <div id="notificationIcon" class="text-primary text-xl">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <div>
                <h4 id="notificationTitle" class="font-medium text-neutral">操作成功</h4>
                <p id="notificationMessage" class="text-sm text-gray-600">二维码已复制到剪贴板</p>
            </div>
            <button id="closeNotification" class="text-gray-400 hover:text-gray-600 ml-2">
                <i class="fa-solid fa-times"></i>
            </button>
        </div>

        <script>
            // 导航菜单切换
            const menuBtn = document.getElementById('menuBtn');
            const mobileMenu = document.getElementById('mobileMenu');
            const navbar = document.getElementById('navbar');
            
            menuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
                if (mobileMenu.classList.contains('hidden')) {
                    menuBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
                } else {
                    menuBtn.innerHTML = '<i class="fa-solid fa-times"></i>';
                }
            });
            
            // 滚动时导航栏样式变化
            window.addEventListener('scroll', () => {
                if (window.scrollY > 10) {
                    navbar.classList.add('py-2', 'shadow-lg');
                    navbar.classList.remove('py-3', 'shadow-md');
                } else {
                    navbar.classList.add('py-3', 'shadow-md');
                    navbar.classList.remove('py-2', 'shadow-lg');
                }
            });
            
            // 表单提交处理
            const qrcodeForm = document.getElementById('qrcodeForm');
            const qrcodeResult = document.getElementById('qrcodeResult');
            const urlInput = document.getElementById('url');
            const clearBtn = document.getElementById('clearBtn');
            const generateBtn = document.getElementById('generateBtn');
            
            // 清空输入框
            clearBtn.addEventListener('click', () => {
                urlInput.value = '';
                urlInput.focus();
            });
            
            // 生成二维码
            generateBtn.addEventListener('click', () => {
                const url = urlInput.value.trim();
                
                if (url) {
                    generateQRCode(url);
                    qrcodeResult.classList.remove('hidden');
                    qrcodeResult.scrollIntoView({ behavior: 'smooth' });
                } else {
                    showNotification('警告', '请输入有效的URL地址', 'warning');
                }
            });
            
            // 生成二维码函数
            function generateQRCode(text) {
                // 清空现有二维码
                const qrcodeElement = document.getElementById('qrcode');
                qrcodeElement.innerHTML = '';
                
                // 生成新二维码
                QRCode.toCanvas(qrcodeElement, text, {
                    width: 256,
                    margin: 1,
                    color: {
                        dark: "#000000",
                        light: "#ffffff"
                    },
                    errorCorrectionLevel: 'H'  // 错误修正级别：L (低), M (中), Q (较高), H (最高)
                }, (error) => {
                    if (error) {
                        console.error(error);
                        showNotification('错误', '生成二维码失败，请重试', 'error');
                    } else {
                        showNotification('成功', '二维码生成成功');
                    }
                });
            }
            
            // 下载PNG
            document.getElementById('downloadPNG').addEventListener('click', () => {
                try {
                    const canvas = document.querySelector('#qrcode');
                    const url = canvas.toDataURL('image/png');
                    downloadURI(url, 'qrcode.png');
                    showNotification('成功', 'PNG格式二维码已下载');
                } catch (error) {
                    console.error(error);
                    showNotification('错误', '下载失败，请重试', 'error');
                }
            });
            
            // 下载SVG
            document.getElementById('downloadSVG').addEventListener('click', () => {
                try {
                    // 使用QRCode.js的toSvg方法
                    QRCode.toString(urlInput.value.trim(), {
                        type: 'svg',
                        width: 256,
                        margin: 1,
                        color: {
                            dark: "#000000",
                            light: "#ffffff"
                        }
                    }, (error, svgString) => {
                        if (error) {
                            console.error(error);
                            showNotification('错误', '生成SVG失败，请重试', 'error');
                        } else {
                            const blob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
                            const url = URL.createObjectURL(blob);
                            downloadURI(url, 'qrcode.svg');
                            showNotification('成功', 'SVG格式二维码已下载');
                        }
                    });
                } catch (error) {
                    console.error(error);
                    showNotification('错误', '下载失败，请重试', 'error');
                }
            });
            
            // 复制到剪贴板
            document.getElementById('copyToClipboard').addEventListener('click', () => {
                try {
                    const canvas = document.querySelector('#qrcode');
                    canvas.toBlob((blob) => {
                        const items = [new ClipboardItem({'image/png': blob})];
                        navigator.clipboard.write(items).then(() => {
                            showNotification('成功', '二维码已复制到剪贴板');
                        }).catch((error) => {
                            console.error(error);
                            showNotification('错误', '复制失败，请重试', 'error');
                        });
                    });
                } catch (error) {
                    console.error(error);
                    showNotification('错误', '复制失败，请重试', 'error');
                }
            });
            
            // 辅助函数：下载URI
            function downloadURI(uri, name) {
                const link = document.createElement('a');
                link.download = name;
                link.href = uri;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
            
            // 显示通知
            function showNotification(title, message, type = 'success') {
                const notification = document.getElementById('notification');
                const notificationTitle = document.getElementById('notificationTitle');
                const notificationMessage = document.getElementById('notificationMessage');
                const notificationIcon = document.getElementById('notificationIcon');
                
                notificationTitle.textContent = title;
                notificationMessage.textContent = message;
                
                // 设置图标和颜色
                if (type === 'success') {
                    notificationIcon.innerHTML = '<i class="fa-solid fa-check-circle"></i>';
                    notificationIcon.className = 'text-green-500 text-xl';
                } else if (type === 'error') {
                    notificationIcon.innerHTML = '<i class="fa-solid fa-exclamation-circle"></i>';
                    notificationIcon.className = 'text-red-500 text-xl';
                } else if (type === 'warning') {
                    notificationIcon.innerHTML = '<i class="fa-solid fa-exclamation-triangle"></i>';
                    notificationIcon.className = 'text-yellow-500 text-xl';
                }
                
                // 显示通知
                notification.classList.remove('translate-y-20', 'opacity-0');
                
                // 3秒后自动关闭
                setTimeout(() => {
                    closeNotification();
                }, 3000);
            }
            
            // 关闭通知
            function closeNotification() {
                const notification = document.getElementById('notification');
                notification.classList.add('translate-y-20', 'opacity-0');
            }
            
            // 点击关闭通知
            document.getElementById('closeNotification').addEventListener('click', closeNotification);
            
            // 初始化页面
            document.addEventListener('DOMContentLoaded', () => {
                // 如果URL有参数，自动填充并生成二维码
                const urlParams = new URLSearchParams(window.location.search);
                const url = urlParams.get('url');
                if (url) {
                    urlInput.value = url;
                    generateQRCode(url);
                    qrcodeResult.classList.remove('hidden');
                }
            });
        </script>
    </body>
    </html>
    